<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div>
     <h1>The City List Page</h1>
     <table id="city-table"></table>
   </div>
   <script src="/js/jquery.min.js"></script>
   <script src="/js/table.js"></script>
   <script>
       var cityColumns=[{title:"id"},{title:"city"},{title:"operation"}];
       $(function(){ //页面加载完成以后执行
           debugger
           doInit("city-table",cityColumns);//创建thead,tbody
           //异步加载服务端数据
           doLoadCitys();
       })
       //异步加载服务端citys信息
       function doLoadCitys(){
           $.ajax({
              url:"/doAjaxGet",
              success(result){//readyState==4 && status==200
                 //console.log(result);
                 doSetTableBodyRows($("#city-table>tbody"),result);
              }
           });
       }
       //将服务端响应的结果更新到页面table的tbody位置
       function doSetTableBodyRows(tBody,result){
           //清空tbody原有内容
          tBody.empty();
          //迭代服务端的响应结果，并将其追加到tbody
          //方法1
          // for(let i=0;i<result.length;i++){
          //      tBody.append(doCreateRow(result[i]));
          // }
          //方法2
          //  result.forEach(function(item) {
          //      tBody.append(doCreateRow(item));
          //  })
          //方法3
          result.forEach(item=>tBody.append(doCreateRow(item)));
       }
       function doCreateRow(row){
           return `<tr>
                      <td>${row.id}</td>
                      <td>${row.city}</td>
                      <td><a href='javascript:doDeleteById(${row.id})'>delete</td>
                   </tr>`
       }
       function doDeleteById(id){
           $.ajax({
               url:`/doAjaxDelete/${id}`,
               method:"delete",
               success(result){
                   alert(result);
                   doLoadCitys();//刷新
               }
           })
       }
   </script>

</body>
</html>